<template>
    <view class="type-page">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

        <!-- 顶部搜索栏 -->
        <view class="search-bar-container" :style="{ paddingTop: searchBarPaddingTop + 'px', backgroundImage: `url(${public_img}/img/backType.png)` }">
            <view class="search-bar" @tap="goToSearchPage">
                <input type="text" placeholder="请输入您要搜索的内容" v-model="searchKeyword" @confirm="handleSearch"
                    class="search-input" />
                <view class="search-icon" @tap.stop="goToSearchPage">
                    <uni-icons type="search" size="18" color="#999999"></uni-icons>
                </view>
            </view>
        </view>

        <!-- 主要内容区域 -->
        <view class="main-content">
            <!-- 左侧分类导航 -->
            <scroll-view class="category-sidebar" scroll-y>
                <view class="category-item" v-for="(category, index) in categoryList" :key="category.id || index"
                    :class="{ 'active': currentCategoryIndex === index }" @click="selectCategory(index)">
                    <view class="category-indicator" v-if="currentCategoryIndex === index"></view>
                    <text class="category-text">{{ category.title }}</text>
                </view>
            </scroll-view>

            <!-- 右侧商品列表 -->
            <scroll-view class="product-list" scroll-y>
                <view class="product-card" v-for="(product, index) in currentProductList" :key="product.id || index"
                    @click="goToProductDetail(product)">
                    <image class="product-image" :src="product.img" mode="aspectFill"></image>
                    <view class="product-info">
                        <view class="product-title">{{ product.title }}</view>
                        <view class="product-synopsis">{{ product.synopsis }}</view>
                        <view class="product-price">¥{{ product.price }}</view>
                    </view>
                </view>

                <!-- 无商品提示 -->
                <view v-if="currentProductList.length === 0" class="no-products">
                    <text>该分类暂无商品</text>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { typeApi } from '@/api/indexAPI.js';
import { public_img } from '@/static/public.js';

export default {
    data() {
        return {
            public_img: public_img,
            statusBarHeight: 0, // 状态栏高度
            searchBarPaddingTop: 0, // 搜索栏顶部内边距（胶囊按钮底部位置 + 间距）
            searchKeyword: '', // 搜索关键词
            categoryList: [], // 分类列表
            currentCategoryIndex: 0, // 当前选中的分类索引
            currentProductList: [], // 当前分类的商品列表
            targetCategoryId: null, // 目标分类ID（从首页跳转时传递）
            isNavigating: false // 是否正在跳转（防止重复跳转）
        };
    },
    onLoad() {
        // 获取设备状态栏高度
        this.getStatusBarHeight();
        // 获取胶囊按钮信息并计算搜索栏padding
        this.getMenuButtonInfo();
        // 加载分类数据
        this.loadCategoryList();
    },
    onShow() {
        // 记录当前TabBar页面（用于打卡页面返回时知道来源）
        uni.setStorageSync('currentTabBarPage', '/pages/type/index');
        
        // 从全局存储中获取目标分类ID（从首页跳转时传递）
        try {
            const categoryId = uni.getStorageSync('targetCategoryId');
            if (categoryId) {
                this.targetCategoryId = categoryId;
                console.log('接收到分类ID:', this.targetCategoryId);
                // 清除存储，避免下次进入时误用
                uni.removeStorageSync('targetCategoryId');
                // 如果分类列表已加载，立即选中对应分类
                if (this.categoryList.length > 0) {
                    this.selectCategoryById(categoryId);
                    // 清除目标分类ID，避免重复使用
                    this.targetCategoryId = null;
                }
                // 如果分类列表还未加载，targetCategoryId 会在 loadCategoryList 完成后处理
            }
        } catch (err) {
            console.error('获取分类ID失败:', err);
        }
    },
    methods: {
        // 获取设备状态栏高度
        getStatusBarHeight() {
            try {
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight || 0;
                console.log('状态栏高度:', this.statusBarHeight);
            } catch (err) {
                console.error('获取状态栏高度失败', err);
                // 默认状态栏高度
                this.statusBarHeight = 20;
            }
        },

        // 获取胶囊按钮信息并计算搜索栏padding
        getMenuButtonInfo() {
            try {
                // #ifdef MP-WEIXIN
                const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
                if (menuButtonInfo) {
                    // 搜索栏padding = 胶囊按钮底部位置 - 状态栏高度 + 间距（10px）
                    this.searchBarPaddingTop = menuButtonInfo.bottom - this.statusBarHeight + 10;
                    console.log('胶囊按钮信息:', menuButtonInfo);
                    console.log('搜索栏padding-top:', this.searchBarPaddingTop);
                } else {
                    // 如果获取失败，使用默认值：导航栏高度（44px）+ 间距（10px）
                    this.searchBarPaddingTop = 44 + 10;
                }
                // #endif

                // #ifndef MP-WEIXIN
                // 非微信小程序环境，使用默认导航栏高度（44px）+ 间距（10px）
                this.searchBarPaddingTop = 44 + 10;
                // #endif
            } catch (err) {
                console.error('获取胶囊按钮信息失败', err);
                // 默认值：导航栏高度（44px）+ 间距（10px）
                this.searchBarPaddingTop = 44 + 10;
            }
        },

        // 加载分类列表
        async loadCategoryList() {
            try {
                uni.showLoading({
                    title: '加载中...'
                });

                const response = await typeApi.getTypeList();

                uni.hideLoading();

                if (response && response.code === 1 && response.data) {
                    this.categoryList = response.data;

                    // 如果有目标分类ID，则选中对应的分类
                    if (this.targetCategoryId) {
                        this.selectCategoryById(this.targetCategoryId);
                        // 清除目标分类ID，避免重复使用
                        this.targetCategoryId = null;
                    } else {
                        // 默认选中第一个分类
                        if (this.categoryList.length > 0) {
                            this.currentProductList = this.categoryList[0].list || [];
                        }
                    }
                } else {
                    uni.showToast({
                        title: response?.msg || '加载失败',
                        icon: 'none'
                    });
                    this.categoryList = [];
                    this.currentProductList = [];
                }
            } catch (error) {
                uni.hideLoading();
                console.error('加载分类列表失败:', error);
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
                this.categoryList = [];
                this.currentProductList = [];
            }
        },

        // 选择分类
        selectCategory(index) {
            this.currentCategoryIndex = index;
            // 更新当前分类的商品列表
            if (this.categoryList[index] && this.categoryList[index].list) {
                this.currentProductList = this.categoryList[index].list;
            } else {
                this.currentProductList = [];
            }
        },

        // 根据分类ID选择分类
        selectCategoryById(categoryId) {
            const targetIndex = this.categoryList.findIndex(category =>
                category.id == categoryId || category.id === categoryId
            );
            if (targetIndex !== -1) {
                this.selectCategory(targetIndex);
                console.log('已选中分类，索引:', targetIndex, '分类:', this.categoryList[targetIndex]);
            } else {
                console.warn('未找到对应的分类ID:', categoryId);
            }
        },
        // 跳转到搜索页面
        goToSearchPage() {
            // 防止重复跳转
            if (this.isNavigating) {
                return;
            }
            this.isNavigating = true;
            
            // 如果有搜索关键词，传递关键词；否则直接跳转
            const keyword = this.searchKeyword.trim();
            const url = keyword 
                ? `/pages/search/index?keyword=${encodeURIComponent(keyword)}`
                : '/pages/search/index';
            
            uni.navigateTo({
                url: url,
                success: () => {
                    // 跳转成功后重置标志
                    this.isNavigating = false;
                },
                fail: () => {
                    // 跳转失败也重置标志
                    this.isNavigating = false;
                }
            });
        },

        // 搜索（确认搜索时）
        handleSearch() {
            if (this.searchKeyword.trim()) {
                // 跳转到搜索页面并传递关键词
                this.goToSearchPage();
            } else {
                // 如果没有关键词，直接跳转到搜索页面
                this.goToSearchPage();
            }
        },

        // 跳转到商品详情
        goToProductDetail(product) {
            if (!product || !product.id) {
                return;
            }
            uni.navigateTo({
                url: `/pages/product/index?id=${product.id}`
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.type-page {
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* 状态栏占位 */
.status-bar {
    width: 100%;
    background-color: #ffffff;
}

/* 顶部搜索栏 */
.search-bar-container {
    background-image: url('');
    background-size: cover;
    width: 100%;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-sizing: border-box;
}

.search-bar {
    width: 100%;
    height: 70rpx;
    background-color: white;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333333;
}

.search-icon {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 主要内容区域 */
.main-content {
    flex: 1;
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* 左侧分类导航 */
.category-sidebar {
    width: 200rpx;
    background-color: #fafafa;
    height: 100%;
}

.category-item {
    position: relative;
    width: 100%;
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.category-item.active {
    background-color: #ffffff;
}

.category-indicator {
    position: absolute;
    left: 3px;
    top: 5px;
    width: 6rpx;
    height: 45px;
    background-color: #ff0000;
}

.category-text {
    font-size: 28rpx;
    color: #333333;
    text-align: center;
}

.category-item.active .category-text {
    font-weight: 700;
    font-size: 30rpx;
    color: #333333;
}

/* 右侧商品列表 */
.product-list {
    flex: 1;
    height: 100%;
    background-color: #f4f4f4;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
}

.product-card {
    border-radius: 5px;
    display: flex;
    padding: 10px 0 10px 8px;
    background-color: white;
    margin: 10px 0;
}

.product-card:last-child {
    border-bottom: none;
}

.product-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    min-width: 0;
}

.product-title {
    font-size: 15px;
    color: #505050;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.product-synopsis {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 90%;
}

.product-price {
    font-size: 15px;
    color: #ff0000;
    display: flex;
    justify-content: flex-end;
    width: 90%;
    margin-top: 20px;
}

/* 无商品提示 */
.no-products {
    width: 100%;
    padding: 100rpx 0;
    text-align: center;
    color: #999999;
    font-size: 28rpx;
}
</style>